@import (reference) '~@/resources/assets/css/variable.less';

.userselect-container {
  .ivu-select-dropdown {
    max-height: 200px;
    overflow: auto;
    &.ivu-select-dropdown-transfer {
      max-height: auto;
    }
  }
}
.ckeditor-readonly-content-box {
  // 处理只读模式下，有些样式丢失的问题，只读模式下没有ck-content类名
  code {
    background-color: hsla(0, 0%, 78%, 0.3);
    border-radius: 2px;
    padding: 0.15em;
  }
  blockquote {
    border-left: 5px solid #ccc;
    font-style: italic;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
  figure {
    &.image {
      img {
        display: block;
        height: auto;
        margin: 0 auto;
        max-width: 100%;
      }
    }
  }
  p {
    word-wrap: break-word;
  }
}
.ck-content {
  min-height: 130px;
  ul,
  ol {
    padding-inline-start: 40px;
  }
  ul {
    list-style: disc;
    li {
      list-style: disc;
    }
  }
  ol {
    list-style: decimal;
    li {
      list-style: decimal;
    }
  }
  i {
    font-style: italic;
  }
}
.ck .ck-placeholder:before,
.ck.ck-placeholder:before {
  white-space: pre-line; // 保留文本中的换行符\n或\r
}
.img-viewer i {
  font-style: oblique; // ckeditor 倾斜样式不生效，被全局的设置为：font-style:normal
}
.ck .ck-powered-by {
  display: none; // 隐藏右小角版权信息logo
}
.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
  position: static; // ckeditor计算top有问题，导致工具栏位置偏移
}
.theme(
  @op-color,
  @title-color,
  @text-color,
  @icon-color,
  @dividing-color,
  @mongolia-color,
  @background-color,
  @blockbg-color,
  @gray-color,
  @border-color-base,
  @boxshadow-main,
  @boxshadow-bolck,
  @disable-color,
  @primary-grey,
  @selected-bg,
  @placeholder-color,
  @topo-node,
  @footer-btn-bg,
  @shadow,
  @main-shadow,
  @primary-color,
  @primary-hover-color,
  ) {
  .ck.ck-reset_all,
  .ck.ck-reset_all * {
    color: @text-color;
  }
  .ck.ck-input {
    background: var(--bg-op, @op-color);
    background-color: var(--bg-op, @op-color); // 输入框背景颜色是白色问题
    border-color: var(--border-color, @border-color-base);
  }
  .ck.ck-input:focus {
    // 输入框聚焦时，边框颜色
    border: 1px solid var(--primary-color, @primary-color);
    box-shadow: 0 0 0 0 var(--primary-color, @primary-color), 0 0;
  }
  .ck.ck-list__item .ck-button.ck-on:hover:not(.ck-disabled) {
    background: var(--primary-grey, @primary-grey);
  }
  .ck.ck-list__item .ck-button.ck-on:focus:not(.ck-switchbutton):not(.ck-disabled) {
    border-color: var(--selected-bg, @selected-bg);
  }
  .ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
    background: var(--selected-bg, @selected-bg);
  }
  .ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
    // 按钮鼠标经过颜色
    background: var(--primary-grey, @primary-grey);
  }
  .ck.ck-button:active,
  .ck.ck-button:focus,
  a.ck.ck-button:active,
  a.ck.ck-button:focus {
    border: 1px solid var(--primary-hover-color, @primary-hover-color);
  }
  .ck.ck-color-grid__tile:focus:not(.ck-disabled),
  .ck.ck-color-grid__tile:hover:not(.ck-disabled) {
    box-shadow: inset 0 0 0 1px var(--primary-hover-color, @primary-hover-color), 0 0 0 2px var(--primary-hover-color, @primary-hover-color);
  }
  .ck.ck-button.ck-on,
  a.ck.ck-button.ck-on {
    color: var(--primary-color, @primary-color);
  }
  .ck .ck-insert-table-dropdown-grid-box.ck-on {
    // 表格选中时，边框颜色
    background: var(--primary-color, @primary-color);
    border-color: var(--primary-color, @primary-color);
  }
  .ck.ck-button.ck-on:not(.ck-disabled):hover,
  a.ck.ck-button.ck-on:not(.ck-disabled):hover {
    background: var(--selected-bg, @selected-bg);
  }
  .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
    border: 1px solid var(--primary-hover-color, @primary-hover-color);
  }
  .ck.ck-button.ck-on:not(.ck-disabled):active,
  a.ck.ck-button.ck-on:not(.ck-disabled):active {
    background: var(--selected-bg, @selected-bg);
  }
  .ck.ck-button:not(.ck-disabled):hover,
  a.ck.ck-button:not(.ck-disabled):hover {
    background-color: @blockbg-color;
  }

  .ck.ck-button.ck-on,
  a.ck.ck-button.ck-on {
    background-color: @blockbg-color;
  }

  .ck.ck-list {
    background: @blockbg-color;
  }

  .ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
    background-color: var(--selected-bg, @selected-bg);
  }

  .ck.ck-list__item .ck-button.ck-on {
    background: var(--selected-bg, @selected-bg);
    color: var(--primary-color, @primary-color);
  }
  .ck.ck-button.ck-list-item-button,
  .ck.ck-button.ck-list-item-button.ck-on {
    background: @blockbg-color;
  }
  .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
    border: solid var(--border-color, @border-color-base);
    border-radius: 10px 10px 0 0 !important;
    border-width: 1px 1px 0;
  }

  .ck.ck-dropdown__panel {
    background: @blockbg-color;
    border: 1px solid var(--border-color, @border-color-base);
  }
  .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
    background: @blockbg-color;
  }
  .ck.ck-button:active,
  .ck.ck-button:focus,
  a.ck.ck-button:active,
  a.ck.ck-button:focus {
    box-shadow: 0 0 0 3px var(--selected-bg, @selected-bg), 0 0;
  }

  .ck-content .table table td,
  .ck-content .table table th,
  .ck-content .table table {
    border-color: var(--border-color, @border-color-base) !important;
    border: 1px solid;
  }
  // 表格只读模式下，加上边框样式
  figure.table table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  figure.table table td,
  figure.table table th,
  figure.table table {
    border-color: var(--border-color, @border-color-base) !important;
    border: 1px solid;
    padding: 0.5em;
  }
}
.ck .ck-tooltip {
  background: @dark-op !important;
}

html {
  .theme(
      @default-op,
      @default-title,
      @default-text,
      @default-icon,
      @default-dividing,
      @default-mongolia,
      @default-background,
      @default-blockbg,
      @default-gray,
      @default-border,
      @default-boxshadow-main,
      @default-boxshadow-bolck,
      @default-disable,
      @primary-grey,
      @default-selectbg,
      @default-placeholder,
      @default-op,
      @default-footer-btn-bg,
      @default-shadow,
      @default-main-shadow,
      @default-primary-color,
      @default-primary-hover-color
   );
  &.theme-dark {
    .theme(
        @dark-op,
        @dark-title,
        @dark-text,
        @dark-icon,
        @dark-dividing,
        @dark-mongolia,
        @dark-background,
        @dark-blockbg,
        @dark-gray,
        @dark-border,
        @dark-boxshadow-main,
        @dark-boxshadow-bolck,
        @dark-disable,
        @menu-background,
        @dark-selectbg,
        @dark-placeholder,
        @dark-dividing,
        @dark-footer-btn-bg,
        @dark-shadow,
        @dark-main-shadow,
        @dark-primary-color,
        @dark-primary-hover-color
      );
  }
}
